import * as React from "react";
const { useState } = React;
const App = () => {
  const [count, setCount] = useState(0);
  console.log('render: ', count)
  const handleAddSync = () => {
    // setCount(count => count + 1);
    // setCount(count => count + 1);
    // setCount(count => count + 1);
  };

  const handleAddASync = () => {
    setTimeout(() => {
        // debugger
        setCount(count + 1)
        
        debugger
        // 这里还会render，会进入bailout
        setCount(count + 1)

        debugger
        // 这个setCount就停止render了
        setCount(count + 1)

        debugger
        setCount(count + 1)
    }, 1000);
  };

  const handleMinus = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleAddSync}>同步+1</button>
      <button onClick={handleAddASync}>异步+1</button>
      <button onClick={handleMinus}>-1</button>
    </div>
  );
};

export default App;
